<template>
	<view class="history-box">
		<u-navbar title="阅读历史">
			<view class="slot-wrap">
				<text @click="handleClearAll" v-show="historyList.length !== 0">清空</text>
			</view>
		</u-navbar>
		<view class="content-box">
			<view v-show="historyList.length !== 0" class="content-header">
				我已读过
				<text>{{historyCount}}</text>本书
			</view>
			<view class="content-book" v-show="historyList.length !== 0">
				<view v-for="(item, index) in historyList" :key="index" class="book-item">
					<view class="book-time">{{item.time}}</view>
					<view class="book-list">
						<history-card class="item" v-for="(cItem,cIndex) in item.bookList" :key="cIndex" :name="cItem.name" :writer="cItem.writer"
						 :image="cItem.image" :bookId="cItem.bookId" :lastReadChapterName="cItem.lastReadChapterName" :lastReadChapterId="cItem.lastReadChapterId"
						 :timestamp="cItem.lastReadTime" :is_over="cItem.is_over" :type="cItem.type"></history-card>
					</view>
				</view>
			</view>
			<u-empty v-show="historyList.length === 0" text="没有阅读记录" mode="list" margin-top="300" icon-size="200" font-size="30"></u-empty>
		</view>
		<!-- 清空提示 -->
		<u-modal v-model="show" content="确认清空阅读历史?" @confirm="confirm" @cancel="show = false" :show-cancel-button="true" :mask-close-able="true"></u-modal>
	</view> 
</template>

<script>
	import _ from 'lodash'
	import {
		mapState
	} from 'vuex'
	export default {
		data(){
			return{
				show:false
			}
		},
		computed: {
			...mapState({
				historyReadList: state => state.read.historyReadList
			}),
			historyCount() {
				let count = 0;
				this.historyList.forEach((item) => {
					count = count + item.bookList.length;
				});
				return count;
			},
			historyList() {
				let _list = _.cloneDeep(this.historyReadList)
				_list.forEach(item => {
					item.lastReadDate = new Date(item.lastReadTime).toLocaleDateString()
				})
				_list = _.groupBy(_list, (item) =>
					item.lastReadDate
				);
				let historyList = []

				Object.entries(_list).forEach(([key, value]) => {
					const itemList = _.orderBy(value, (o) => {
						return o.lastReadTime
					}, 'desc')
					historyList.push({
						time: key,
						bookList: itemList
					});
				})

				historyList = _.orderBy(historyList, (o) => {
					return o.time
				}, 'desc')

				return historyList
			}
		},
		methods: {
			handleClearAll() {
				this.show = true
				
			},
			confirm(){
				this.$store.commit('SET_HISTORY_READ_LIST',[])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.history-box {
		min-height: 100vh;
		background: rgba(245, 248, 252, 1);
	}

	.content-header {
		font-size: 30rpx;
		padding: 20rpx 40rpx;
	}

	.content-header span {
		color: rgba(145, 199, 255, 1);
		padding: 0 10rpx;
	}

	.content-book {
		border-top: 4rpx solid #e2e2e2;
		border-bottom: 4rpx solid #e2e2e2;
		padding: 0rpx 20rpx 0rpx 40rpx;
	}

	.book-item {
		padding: 20rpx 0rpx 20rpx 40rpx;
		border-left: 4rpx solid #e2e2e2;
		border-bottom: 4rpx solid #e2e2e2;
	}

	.book-item:last-child {
		border-bottom: none;
	}

	.book-time {
		font-size: 28rpx;
		color: rgba(6, 27, 65, 0.35);
		margin-bottom: 20rpx;
		position: relative;
	}

	.book-time::before {
		content: "";
		width: 20rpx;
		height: 20rpx;
		display: inline-block;
		position: absolute;
		left: -56rpx;
		top: 8rpx;
		border: 4rpx solid #91c7ff;
		border-radius: 40rpx;
		background: white;
	}

	.book-list {
		.item{
			margin-bottom: 40rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
	}

	.book-list div {
		border-bottom: 1rpx solid #e2e2e2;
		padding-bottom: 20rpx;
	}

	.book-list div:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.slot-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		padding: 0 20px;
	}
</style>
